<script setup>
import { useRoute } from "vue-router";
import "animate.css/animate.min.css";

import { onMounted } from "vue";
const route = useRoute();
// 获取当前路由的动画类型
const getTransition = () => {
  return route.meta.transition || "fade"; // 默认使用淡入淡出
};

// 获取当前路由的动画名称，没有则用默认
</script>

<template>
  <!-- <RouterView /> -->
  <div class="a">
    <router-view v-slot="{ Component }">
      <transition :name="getTransition()">
        <component :is="Component" />
      </transition>
    </router-view>
  </div>
</template>

<style lang="scss" scoped>
.a {
  position: relative; //必须
  display: flex; //必须
  flex-direction: column; //必须
  .fade-enter-active,
  .fade-leave-active {
    overflow: hidden;
    transition: transform 0.5s ease;
    position: absolute; /* 关键：让新旧页面层叠 */
  }

  .fade-enter-from {
    transform: translateY(100%);
  }
  .fade-leave-to {
    transform: translateY(-100%);
  }

  .home-enter-active,
  .home-leave-active {
    overflow: hidden;
    transition: transform 0.5s ease;
    position: absolute; /* 关键：让新旧页面层叠 */
  }

  .home-enter-from {
    transform: translateY(0);
  }
  .home-leave-to {
    transform: translateY(-100%); //首页被切换时离开首页的动画
  }
}
</style>

<style lang="scss">
// y
@font-face {
  font-family: homeTitle1;
  src: url(./assets//numberFont/homeTitle1.woff2);
}
// y
@font-face {
  font-family: NavigationBar;
  src: url(./assets//numberFont/NavigationBar.woff2);
}

// y
@font-face {
  font-family: kaiti;
  src: url(./assets//numberFont/kaiti.woff2);
}

@font-face {
  font-family: yasong;
  src: url(./assets//numberFont/yasong.woff2);
}
html {
  overflow: hidden;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-size: 16px;
}
input {
  border: none;
  outline: none; /* 移除聚焦时的外轮廓线 */
  /* 清除背景色 */
  background-color: transparent;
  /* 清除内边距 */
  padding: 0;
}
ul,
ol,
li {
  /* 清除列表符号 */
  list-style: none;
  /* 清除内外边距 */
  margin: 0;
  padding: 0;
  /* 清除文本缩进 */
  text-indent: 0;
}

/* 清除嵌套列表的默认缩进 */
ul ul,
ol ol,
ul ol,
ol ul {
  padding-left: 0; /* 浏览器默认会有缩进 */
}
.chart {
  background: transparent !important; //给所有图表加背景透明
}
</style>
